<template>
  <el-menu background-color="#20222a" text-color="#ffffff" @select="handleSelect" unique-opened :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" :collapse="isCollapse">
    <div id="logo" class="layout-logo" style="height:60px;">
      <router-link class="layout-logo-route" :style="'height:60px;background-color:#1C1C1C;color:#ffffff'" to="/main"><span v-if="isCollapse"><i class="el-icon-info"></i>绘自传</span>
      <span v-else><i class="el-icon-info"></i>杭州绘自传</span></router-link>
    </div>
    <el-menu-item @click="openAndCloseSidebar">
      <span v-show="isCollapse" slot="title">展开菜单</span>
      <i v-show="isCollapse" class="el-icon-menu" @mouseenter="openAndCloseSidebar"></i>
      <span v-show="!isCollapse"><i @mouseleave="openAndCloseSidebar" class="el-icon-menu"></i>关闭菜单</span>
    </el-menu-item>
    <el-submenu v-for="(root,index) in menus" :key="root.id" v-if="root.type == 'ROOT'" :index="root.id.toString()">
      <template slot="title">
        <i :class="root.icon"></i>
        <span slot="title">{{root.title}}</span>
      </template>
      <el-submenu v-for="(group,index) in menus" :key="group.id" v-if="group.parentId == root.id" :index="group.id.toString()">
        <span slot="title">{{group.title}}</span>
        <el-menu-item v-for="(menu,index) in menus" @click="findButtons(menu.id,menu.url)" :key="menu.id" v-if="menu.parentId == group.id" :index="menu.url">{{menu.title}}</el-menu-item>
      </el-submenu>
    </el-submenu>
  </el-menu>
</template>

<script>
import global from '@/common/components/Global'
import axios from '@/common/js/axios'
export default {
  name: 'layout-sidebar',
  props: {
    menus: Array,
    isCollapse: Boolean,
  },
  data(){
    return {
      permission:[],
      asideWidth:65,
      parentId:this.$route.params.id
    }
  },
  created(){

  },

  mounted () {
    this.findButtons(this.$route.query.id,'');
    this.initTabs();

  },
  methods:{
    /**
     * 刷新时以当前路由做为tab加入tabs
     * 当前路由不是首页时，添加首页以及另一页到store里，并设置激活状态
     * 当前路由是首页时，添加首页到store，并设置激活状态
     * */
    initTabs(){
      if (this.$route.path !== '/' && this.$route.path !== '/main') {
        this.$store.commit('set_options', {route: '/main' , name: '首页',title: '首页'});
        this.$store.commit('set_options', {route: this.$route.path, id:this.$route.query.id,name: this.$route.name,title: this.$route.name  });
        this.$store.commit('set_active_index', this.$route.path);
      } else {
        this.$store.commit('set_options', {route: this.$route.path, name: '首页',title: '首页'});
        this.$store.commit('set_active_index', this.$route.path);
        this.$router.push(this.$route.path);
      }
    },
    findButtons(parentId,url) {
      let _this = this;
      if (parentId !== '' && parentId !== undefined){
        axios({
          url: global.adminBackEndApi + 'sys/findButtons',
          method: 'post',
          data: parseInt(parentId)
        }).then(response => {
          if (response.data.result){
            _this.$store.commit('set_buttons',response.data.data)
            if (url !== '') {
              _this.$router.push({
                path: url,
                query: {id:parentId}
              })
            }
          } else {
            _this.$message.warning(response.data.msg)
          }

        })
      }

    },
    handleSelect(key, keyPath) {

    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    openAndCloseSidebar(event){
      if (this.isCollapse == true){
        this.isCollapse = false;
        this.asideWidth = 200;
      }else{
        this.isCollapse = true;
        this.asideWidth = 65;
      }
    },
  }
}
</script>

<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    solid:0px;
  }
  .el-menu-vertical-demo {
    height:calc(100% - 60px);
    background-color:#393d49;
    border-right: solid 0px #e6e6e6;
  }
  .layout-logo{
    text-align: center;
    line-height: 60px;
  }
  .layout-logo-route{
    text-decoraction: none;
  }
  .el-aside{
    left:0px;
    top:0px;
    height:100%;
    index-z:37;
    background-color:#20222a;
  }
</style>
